<script setup lang="ts">

import { useCounterStore } from '@/stores/change';
import type { AxiosResData, ChannelResData,ChannelItem } from '@/types';
import axios from 'axios'
import { onMounted, ref } from 'vue';

// defineProps<{
//   changeid: number
// }>()

// defineEmits<{
//   'update': [idd: number]
// }>()

const store=useCounterStore()

const list = ref<ChannelItem[]>([])

const getList = async () => { 
  const res = await axios.get<AxiosResData<ChannelResData>>('http://geek.itheima.net/v1_0/channels')
  console.log(res)
  list.value = res.data.data.channels
}

onMounted(() => { 
  getList()
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: store.changeid === item.id}"
        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="store.updatechangeid(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>